<template>
  <div class="home-view" style="">
    <van-sticky>
      <!-- 搜索 -->
      <van-search placeholder="请输入搜索关键词" @click="router.push('/search')" />
      <!-- 标签页 -->
      <van-tabs v-model:active="nowCat">
        <van-tab title="首页" name="0041"></van-tab>
        <van-tab v-for="item in baseStore.CatData" :key="item.cat_id" :title="item.cat_name"
          :name="item.cat_id"></van-tab>
      </van-tabs>
    </van-sticky>
    <!-- 轮播图 -->
    <Banner></Banner>
    <!-- 首页广告或其他页专题 -->
    <component :is="nowCat == '0041' ? Advertisement : Special"></component>
    <!-- 商品列表 -->
    <home-goods-list v-for="item in baseStore.CatGoodsList" :key="item.cat_small_id"
      :goods_list="item"></home-goods-list>
  </div>
  <van-back-top bottom="10vh"/>
</template>

<script setup lang="ts">
// 引入仓库
import { useBaseStore } from '../../store';
// 两个组件
import Special from '../../components/homecomponents/Special.vue';
import Advertisement from '../../components/homecomponents/Advertisement.vue';
const router = useRouter();
let baseStore = useBaseStore();

let nowCat = ref("");

//当nowCat开始变化触发函数
watch(nowCat, Value => {
  baseStore.getCatBannerData(Value);
  baseStore.getCatSpecialData(Value);
  baseStore.getCatGoodsDataList(Value);
});

</script>

<style scoped lang="less">
.home-view {
  width: 100%;
  height: 100%;
  padding-bottom: 51px;
  box-sizing: border-box;
  overflow-y: scroll;
}

.home-view::-webkit-scrollbar {
  display: none;
}
</style>
